<template>
  <transition name="fade">
    <div class="message-wrap" :class="type" v-if="visible">
      <i class="icon-type iconfont" :class="'icon-'+type"></i>
      <div class="content">{{content}}
        <i v-if="hasClose" class="btn-close iconfont icon-close" @click="visible=false"></i>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'MyMessage',
  data () {
    return {
      content: '',
      time: 3000,
      visible: false,
      type: 'info', // 'success','warning','error'
      hasClose: false
    }
  },
  mounted () {
    this.close()
  },
  methods: {
    close () {
      window.setTimeout(() => {
        this.visible = false
      }, this.time)
    }
  }
}
</script>

<style scoped >
.message-wrap {
  position: fixed;
  background-color: #44b0f3;
  color: #ffffff;
  left: 40%;
  width: 20%;
  top: 25px;
  height: 40px;
  z-index: 1001;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #ebeef5;
}
.message-wrap .content {
    line-height: 40px;
  }

.error {
  background-color: #fef0f0;
  color: #f56c6c;
}
.success {
  background-color: #f0f9eb;
  color: #67c23a;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  transition: all 0.2s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>
